<template>
	<div class="container1">
		<h3>测试vue-color插件</h3>
		<!-- <div>
			1. Material
			<Material v-model="colors1" />
		</div> -->
		<div class="yq" :style="{ backgroundColor: SliderColors.hex || '#ccc' }"></div>
		<div>
			<!-- 1. Slider -->
			<Slider v-model="SliderColors" />
		</div>
	</div>
</template>

<script>
	import {
		Material,
		Compact,
		Swatches,
		Slider,
		Photoshop,
		Chrome,
		Sketch,
		Twitter,
		Grayscale
	} from 'vue-color'
	export default {
		/* eslint-disable */
		components: {
			Material,
			Compact,
			Swatches,
			Slider,
			Photoshop,
			Chrome,
			Sketch,
			Twitter,
			Grayscale
		},
		data() {
			return {
				key: 'value',
				colors1: '',
				SliderColors: {}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.container1 {
		min-height: 100vh;
		background-color: rgb(216, 245, 225);
	}
	::v-deep .vc-slider {
		margin: 0 auto;
		width: 90%;
		// .vc-slider-swatches {
		// 	display: none;
		// }
	}
	.yq {
		margin: 15px auto;
		width: 20px;
		height: 20px;
		border-radius: 50%;
		// background-color: #ccc;
	}
</style>
